<template>
  <div v-loading="loading">
    <el-tabs
      @tab-change="loadData"
      tab-position="left"
      v-model="currentTeacher"
      :style="`height: ${tableHeight}px`"
    >
      <el-tab-pane
        :style="`height: ${tableHeight}px`"
        v-for="(cls, idx) in allUser"
        :key="cls.Pk"
        :name="cls.Pk"
        :label="cls.UserName"
      >
        <FullCalendar
          :ref="setCalendarRef"
          v-if="currentTeacher === cls.Pk"
          :options="calendarOpts"
        />
      </el-tab-pane>
    </el-tabs>
    <div v-loading="loading" class="my_opt_btn_pannel">
      <div style="text-align: left; padding: 6px; font-family: 'Microsoft YaHei'">
        <h8
          >{{ allUser.find((r) => r.Pk === currentTeacher)?.UserName }}老师当月课时共{{
            total
          }}节</h8
        >
      </div>
      <div style="text-align: right; padding-right: 20px"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, nextTick, onMounted, ref } from 'vue'
import { listUser } from '@/api/user'
import type { UserModel } from '@/type/User'
import { useWindowSize } from '@vueuse/core'
import { ElMessage } from 'element-plus'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import { useUserStore } from '@/stores/user'
import { listByTeacher } from '@/api/schedule'
import zhCn from '@fullcalendar/core/locales/zh-cn'
import type { CalendarOptions } from '@fullcalendar/core/index.js'
import { dateFormat } from '@/utils/stringUtils'
import type { kvModel } from '@/type/ResponseData'
const useStore = useUserStore()
const currentTeacher = ref()
const winSize = useWindowSize()
const tableHeight = computed(() => winSize.height.value - 60 - 16 - 32 - 4) //60是MENU,16是PADDING,32是按钮区域，4是内容区和按钮区的距离
const loading = ref(false)
const allUser = ref<UserModel[]>([])
const start = ref<string>()
const end = ref<string>()
const calendarRef = ref<any>()
const total = ref(0)
const setCalendarRef = (el: any) => {
  if (el) {
    calendarRef.value = el
  }
}
const calendarOpts = ref<CalendarOptions>({
  initialView: 'dayGridMonth',
  plugins: [dayGridPlugin],
  locale: zhCn,
  height: '100%',
  dayMaxEvents: 11,
  allDaySlot: false,
  fixedWeekCount: false,
  datesSet: async (info) => {
    start.value = dateFormat(info.view.currentStart)
    const da = info.view.currentEnd
    end.value = dateFormat(new Date(da.setDate(da.getDate() - 1)))
    await getSchedule()
  },
})
onMounted(async () => {
  try {
    loading.value = true
    const cond: any = { pageSize: 10000 }
    if (!useStore.isAdm) if (!useStore.isAdm) cond.S_Pk = `eq(${useStore.userId})`
    allUser.value = (await listUser(cond)).Data
    loadData(useStore.userId!)
  } finally {
    loading.value = false
  }
})
const getSchedule = async () => {
  loading.value = true
  try {
    calendarOpts.value.events = []
    const data = (await listByTeacher(currentTeacher.value, start.value!, end.value!)).Data
    data.sort((a, b) => {
      return b.Seq! - a.Seq!
    })
    data.forEach((r) => {
      ;(calendarOpts.value.events as any).push({
        id: r.Pk,
        title: `第${r.Seq}节 ${(r.DseClass as kvModel)._v} ${(r.Course as kvModel)._v}`,
        start: r.Date,
        end: r.Date,
        color: r.Color,
      })
    })
    total.value = data.length
  } finally {
    loading.value = false
  }
}
const loadData = async (name: string) => {
  currentTeacher.value = name
  await nextTick()
  if (!calendarRef.value) {
    ElMessage.error('刷新失败')
    return
  }
  const api = calendarRef.value?.getApi()
  api.updateSize()
  const view = api.view
  start.value = dateFormat(view.currentStart)
  const da = view.currentEnd
  end.value = dateFormat(new Date(da.setDate(da.getDate() - 1)))
}
</script>
